<template>
  <div class="index-box d-flex" ref="index">
    	<div class="leftBox" :style="{'width': leftTreeShow?'200px':'0px'}">
        <div class="tree-box">
          <el-tree :data="treeList" node-key="categoryId" ref="tree" :props="defaultProps" current-node-key="" default-expand-all :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
        </div>
     	</div>
     	<div class="rightBox">
        <div class="main-box">
          <div class="search" ref="search">
            <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
              class="demo-form-inline" id="searchBox">
              <MyLeftTreeRetract :leftTreeShow.sync="leftTreeShow"></MyLeftTreeRetract>
              <el-form-item prop="goodsCode">
                  <el-input v-model="searchForm.goodsCode" clearable placeholder="请输入商品编号"></el-input>
              </el-form-item>
              <el-form-item prop="goodsName">
                  <el-input v-model="searchForm.goodsName" clearable placeholder="请输入商品名称"></el-input>
              </el-form-item>
             <!-- <el-form-item prop="address">
                  <el-cascader
                   placeholder="请选择区域"
                   size="small" clearable
                   :options="cascaderOptions"
                   v-model="searchForm.address"
                   @change="addressChange">
                  </el-cascader>
              </el-form-item> -->
              <el-form-item prop="auditUserName">
                  <el-input v-model="searchForm.auditUserName" clearable placeholder="请输入审核人信息"></el-input>
              </el-form-item>

              <el-form-item prop="goodsState">
               <el-select filterable clearable v-model="searchForm.goodsState" placeholder="上下架">
                 <el-option label="已上架" value="1"></el-option>
                 <el-option label="已下架" value="2"></el-option>
               </el-select>
              </el-form-item>

              <el-form-item prop="applyTime">
                <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
                  start-placeholder="申请开始日期" end-placeholder="申请结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>

              <el-form-item prop="auditTime">
                <el-date-picker v-model="auditTime" type="daterange" align="right" unlink-panels range-separator="至"
                  start-placeholder="审核开始日期" end-placeholder="审核结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>

              <el-form-item class="clearfix">
                <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
              </el-form-item>

            </el-form>
          </div>
          <div class="actionBtn" ref="actionBtn">
            <div class="actionBtnLeft">
              <el-radio-group v-model="searchForm.hotGoodsAuditStatus" size="small" style="margin-right: 15px;" @change="handleSearch()">
                <el-radio-button label="" >全部</el-radio-button>
                <el-radio-button :label="item.dictValue" v-for="item in goods_audit_status">{{item.dictLabel}}</el-radio-button>
              </el-radio-group>

              <!-- <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus">添加好礼商品</el-button> -->
              <!-- <el-button type="danger" icon="el-icon-delete" size="small" @click="handleDelete">批量删除</el-button> -->
            </div>
            <div class="actionBtnRight">
                <MyRefresh/>
                <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
            </div>
          </div>
          <div class="table" ref="table">
            <el-table :data="dataList" style="width: 100%;"  border stripe  :height="tableHeight"
             @selection-change="handleSelectionChange" @sort-change="handleTablechangeSort" >
             <!-- <el-table-column type="selection" width="55" ></el-table-column> -->
              <el-table-column prop="goodsCode" label="商品编号" v-if="!hideTableColumn.includes('number')" width="120"></el-table-column>
              <el-table-column prop="name"  label="商品" v-if="!hideTableColumn.includes('img')" min-width="250">
                <template #default="scope">
                  <div class="goodsBox">
                    <div class="img">
                      <el-image :src="scope.row.goodsImage" fit="fill" v-image-preview="scope.row.goodsImage"></el-image>
                    </div>
                    <div class="goodsRight">
                      <div class="goodsName ellipsis-item">{{scope.row.goodsName}}</div>
                      <div class="goodsLabel">
                        <MyTableTag :tagList="scope.row.tagNames"/>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="skuStocksList[0].originalPrice" label="原价(元)" v-if="!hideTableColumn.includes('original')"  align="center" width="100"></el-table-column>
              <el-table-column prop="skuStocksList[0].salePrice" label="平台售价(元)" v-if="!hideTableColumn.includes('retail')"  align="center"  width="120"></el-table-column>
              <el-table-column prop="couponPrice" label="消费券抵扣(元)" v-if="!hideTableColumn.includes('couponPrice')"  align="center" sortable width="140"> </el-table-column>
              <!-- <el-table-column prop="couponFlag" label="赠送消费券是否可用" v-if="!hideTableColumn.includes('couponFlag')"  align="center" sortable width="175">
                <template #default="scope">
                    <span>{{scope.row.couponFlag=='1'?'不可用':'可用'}}</span>
                </template>
              </el-table-column> -->
              <el-table-column prop="goodsState" label="上/下架" v-if="!hideTableColumn.includes('upStatus')"  align="center" sortable width="100">
                <template #default="scope">
                    <span @click="handleChangeUpDownStatus(scope.row)" :class="scope.row.goodsState=='2'?'down':'up'">{{scope.row.goodsState=='2'?'已下架':'已上架'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="申请时间" align="center" prop="createTime" width="160" sortable v-if="!hideTableColumn.includes('applyTime')">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="审核时间" align="center" prop="createTime" width="160" sortable v-if="!hideTableColumn.includes('auditTime')">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.auditTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="auditUserName" label="审核人信息"  align="center"  width="120"></el-table-column>
              <el-table-column prop="name" label="状态" v-if="!hideTableColumn.includes('auditStatus')"  align="center" width="120">
                <template slot-scope="scope">
                  <div class="tagBox" >
                    <el-tag :type="scope.row.hotGoodsAuditStatusName=='待审核'?'primary':(scope.row.hotGoodsAuditStatusName=='已通过'?'success':'warning')" >
                      {{scope.row.hotGoodsAuditStatusName}}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>

              <el-table-column prop="name" label="操作"  align="center" width="120"  fixed="right">
                <template #default="scope">
                  <div class="verticalBtn">
                       <el-button
                        size="medium"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)"
                      >修改</el-button>
                      <el-button
                        size="medium"
                        type="text"
                        icon="el-icon-document"
                        @click="handleShopOperation(scope.row)"
                      >商品运营</el-button>
                      <el-button
                        size="medium"
                        type="text"
                        icon="el-icon-view"
                        @click="handleLook(scope.row)"
                      >查看</el-button>
                     <!-- <el-button
                        size="medium"
                        type="text"
                        icon="el-icon-document"
                        @click="handleTag(scope.row)"
                      >标签</el-button> -->
                       <!-- <el-button
                        size="medium"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                      >删除</el-button> -->
                     <!-- <el-dropdown size="medium" >
                        <span class="el-dropdown-link">
                          <i class="el-icon-d-arrow-right el-icon--right"></i>更多
                        </span>
                        <el-dropdown-menu slot="dropdown" >
                          <el-dropdown-item @click.native="handleDelete(scope.row)" >删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page" ref="page">
            <MyPagination
               :total="total"
               :page.sync="searchForm.pageNum"
               :limit.sync="searchForm.pageSize"
               @pagination="dataInfo"
             />
          </div>
        </div>
      </div>

  <!-- /*添加标签*/	 -->
  <el-dialog title="添加标签" width="1000px" v-dialogDrag :close-on-click-modal="false" :visible.sync="allocationUserVisible" @close="allocationUserVisible = false">
     <div class="allocationUserDialog d-flex">
       <div class="leftDialog" style="flex:1">
           <el-tree :data="tagTreeList" :props="defaultPropsTag" default-expand-all @node-click="handleNodeTagClick"></el-tree>
       </div>
       <div class="rightDialog" style="flex:3">
           <div class="searchDialog d-flex" style="margin-bottom: 10px;">
               <el-input v-model="allocationUserSearchForm.tagName" clearable placeholder="请输入标签名称" size="small" style="width:250px;margin-right: 10px;"></el-input>
               <el-button type="primary" @click="handleAllocationUserSearch()" size="small">查询</el-button>
           </div>
           <div class="tableDialog">
               <el-table :data="allocationUserList" style="width: 100%;"  border height="500"
                 @select="handleSelect" ref="multipleTableAllocationUser" stripe size="small">
                 <el-table-column type="selection" width="55" ></el-table-column>
                 <el-table-column label="序号" type="index"  width="100" > </el-table-column>
                 <el-table-column prop="name" label="标签名称" >
                   <template #default="scope">
                     <el-tag  effect="plain" :style="{borderColor:scope.row.color,color: scope.row.color}">{{ scope.row.name }}</el-tag>
                   </template>
                 </el-table-column>
               </el-table>
           </div>
       </div>
     </div>
     <div class="activeCheckedBox">
         <el-tag v-for="(tag,index) in multipleSelectionAllocationUser" :style="{borderColor:tag.color,color:tag.color}"  :key="tag.id" closable @close="handleClose(tag,index)" type="primary" style="margin-right:5px;background-color: #fff;">
           {{tag.name}}
         </el-tag>
     </div>
     <div slot="footer" class="dialog-footer">
       <el-button @click="allocationUserVisible = false" size="small">取 消</el-button>
       <el-button type="primary" @click="submitEditTag()" size="small" :loading="userLoading">确 定</el-button>
     </div>
   </el-dialog>

   <!-- /*s商品运营*/	 -->
   <el-dialog title="商品运营" width="700px" v-dialogDrag :close-on-click-modal="false" :visible.sync="shopOperationVisible" @close="shopOperationVisible = false">
      <div class="shopOperationBox">
          <el-radio-group v-model="shopOperationForm.operationId">
            <el-radio :label="item.operationId" v-for="item in operationList">{{item.name}}</el-radio>
          </el-radio-group>
          <div class="banner d-flex" v-if="shopOperationForm.operationId=='1498922467067502594'">
              <div class="label" style="margin-right:15px;color:#606266;width:120px;text-align: center;"><span class="red">*</span>上传Banner</div>
              <div class="content flex1">
                <MyUpImg :imagePreview='shopOperationForm.imagePath' :imageSource='shopOperationForm.imagePath' @change="changBanner" size="700"></MyUpImg>
                <p class="red">图片规格为：宽 700px、高230px、尺寸不能超过10mb</p>
                <p >备注：上传Banner图时，一定要按照图片的规格大小和图片展现的方式制作，您可右击下载 图片进行参考，上传的图若造成平台负面影响，仟店平台会下架您的商品并追究相关责任。</p>

              </div>
          </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="shopOperationVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitshopOperation()" size="small" :loading="userLoading">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import common from '@/api/api';
  import { goodsCategoryList,getCategoryGoodsList,getTagCategory,getTagList,setGoodsTag,deleteGoods,updateGoodsStatus,addOperateGroup,getOperationGroupList } from '@/api/getData';
  import option from '../../common/option.js';
  import { regionData,CodeToText } from 'element-china-area-data';
  export default {
    data() {
      return {
        loading: false,
        userLoading: false,
        leftTreeShow: true,
        allocationUserList:[],/*分配用户表格数据*/
        cascaderOptions:regionData,/*省市区插件数据*/
        shopTypeList:[],//商家类型列表
        auditList:[],
        memberList:[],
        tableColumn:[{/*自定义表格列*/
            name:'商品编号',
            value:'number'
        },{
            name:'商品',
            value:'img'
        },{
            name:'发货地',
            value:'shopName'
        },{
            name:'原价(元)',
            value:'original'
        },{
            name:'平台售价(元)',
            value:'retail'
        },{
            name:'消费券抵扣(元)',
            value:'couponPrice'
        },{
            name:'上/下架',
            value:'upStatus'
        },{
            name:'申请时间',
            value:'applyTime'
        },{
            name:'审核时间',
            value:'auditTime'
        },{
            name:'状态',
            value:'auditStatus'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        categoryId:'',
        searchForm: {
          categoryId:'',
          parentCategoryId:'',
          goodsCode:"",
          goodsName:'',
          goodsState:'',
          hotGoodsAuditStatus:'',
          auditUserName:'',

          goodsType:'1',
          pageNum: 1,
          pageSize: 20,
          orderByColumn:'',
          isAsc:'',
        },
        treeList: [{categoryId:"",name: "商品分类",children: []}],
        treeListStatus:[],
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        defaultProps: {
           children: 'children',
           label: 'name'
        },
        defaultPropsTag:{
          children: 'children',
          label: 'name'
        },
        multipleSelection: '',
        userFormVisible:false,
        dialogTitle:'',
        user: {
          id: '',
          parentId:'',

          themeName:'',
          img:'',

          typeName:'',
          parentType:"",
        },
        rules: {
          themeName: [{required: true, message: '主题名称不能为空',trigger: 'blur'}],
          typeName: [{required: true, message: '分类名称不能为空',trigger: 'change'}]
        },

        allocationUserVisible:false,
        tagTreeList:[],
        multipleSelectionAllocationUser:[],
        allocationUserSearchForm:{
          tagName:'',
          typeId:'',
          pageNum:1,
          pageSize:100
        },
        allocationUserStatus:[],/*选中的分配人员*/
        goods_audit_status:[],//商品审核转台
        auditTime:[],
        applyTime:[],
        statusRow:{},

        shopOperationForm:{
          goodsId:'',
          operationId:'',
          imagePath:''
        },
        shopOperationVisible:false,

        operationList:[]
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.getSelect();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.applyTime, 'applyTimeStart', 'applyTimeEnd');
          data = this.addDateRange(data, this.auditTime, 'auditTimeStart', 'auditTimeEnd');
          this.loading = true;

          const result = await getCategoryGoodsList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }

          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleShopOperation(row){/*商品运营点击*/
        getOperationGroupList(this.shopOperationForm).then(res=>{
             if (res.code == 200) {
                this.operationList = res.data;
             } else {
               this.$message.error(res.msg);
             }
          });
        this.shopOperationForm.goodsId = row.goodsId;
        this.shopOperationForm.imagePath = '';
        this.shopOperationForm.operationId = '';
        this.shopOperationVisible = true;
      },
      submitshopOperation(){
        if(!this.shopOperationForm.operationId){
          this.$message.error('请选中其中一个')
        }else if(this.shopOperationForm.operationId=='3' && (!this.shopOperationForm.bannerImage)){
          this.$message.error('请上传Banner')
        }else{
          this.userLoading = true;
          addOperateGroup(this.shopOperationForm).then(res=>{
             if (res.code == 200) {
               this.$message.success(res.msg);
               this.shopOperationVisible = false;
               this.dataInfo();
             } else {
               this.$message.error(res.msg);
             }
             this.userLoading = false;
          });
        }

      },
      changBanner(path){
        this.shopOperationForm.imagePath = path;
      },
      handleAllTag(data){
        this.tagsList = data;
        this.tagVisible = true;
      },
      getSelect(){
        goodsCategoryList().then(res=>{
          this.treeList[0].children = res.data;
          this.treeListStatus = res.data;
        });
        this.getSelectList('hot_goods_audit_status').then(res=>{ this.goods_audit_status = res.data; })
      },
      handleAllocationUserSearch(){
        this.tagList();
      },
      handleSelect(val,row){
        let index = '';
        for(let i=0;i<this.multipleSelectionAllocationUser.length;i++){
          if(this.multipleSelectionAllocationUser[i].tagId == row.tagId){
            index = i;
          }
        }
        if(index || index=='0'){
          this.multipleSelectionAllocationUser.splice(index,1)
        }else{
          this.multipleSelectionAllocationUser.push(row);
        }
      },
      addressChange(arr) {
        if(arr){
          this.searchForm.provinceId = arr[0]+'000000';
          this.searchForm.cityId = arr[1]+'000000';
          this.searchForm.areaId = arr[2]+'000000';
        }else{
          this.searchForm.provinceId='';
          this.searchForm.cityId='';
          this.searchForm.areaId='';
        }

      },
      handleClose(row,index){/*移除 分配用户 选中项*/
        this.multipleSelectionAllocationUser.splice(index,1);
        this.$refs.multipleTableAllocationUser.toggleRowSelection(row, false); //不选中
      },
      handleApplyGoodShop(row){/*申请好礼专区*/
        this.$router.push({path:'/shop/applyGoodShop',query:{goodsId:row.goodsId}});
      },
      submitEditTag(){
          if(!this.multipleSelectionAllocationUser.length){
            this.$modal.msgWarning('请选中在点击保存');
            return;
          }
          this.userLoading = true;
          let tagIds =[];
          for(let i=0;i<this.multipleSelectionAllocationUser.length;i++){
            tagIds.push(this.multipleSelectionAllocationUser[i].tagId)
          }
          let data = {
            goodsId:this.statusRow.goodsId,
            tagIds:tagIds.join(',')
          }
          setGoodsTag(data).then((result) => {
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.allocationUserVisible = false;
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
            this.userLoading = false;
          });
      },
      handleLook(row){
        this.$router.push({path:'/shop/shopDetails',query:{goodsId:row.goodsId}});
      },
      handleTag(row){
        this.handleGetTreeList();
        this.statusRow = row;
        this.multipleSelectionAllocationUser = JSON.parse(JSON.stringify(row.tagList));
        this.allocationUserList = [];
        this.allocationUserVisible = true;
      },
      handleNodeTagClick(row){
        this.allocationUserSearchForm.typeId = row.typeId;
        this.tagList();
      },
      toggleSelection(rows) {
        if (rows) {
         rows.forEach(row => {
          	this.$refs.multipleTableAllocationUser.toggleRowSelection(this.allocationUserList.find(item=>{
              return row.tagId == item.tagId;
            }),true);
          });
        };
      },
      async tagList() {
        try {
          const result = await getTagList(this.allocationUserSearchForm);
          if (result.code == 200) {
            this.allocationUserList = result.rows;

            this.$nextTick(() => {
              this.toggleSelection(this.multipleSelectionAllocationUser)
            })

          } else {
            this.$message.error(result.msg);
          }
        } catch (err) {
          console.log(err)
        }
      },
      async handleGetTreeList(){
        try {
          const result = await getTagCategory();
          if (result.code == 200) {
            this.tagTreeList = result.data;
          } else {
            this.$message.error(result.msg);
          }
        } catch (err) {
          console.log(err)
        }
      },
      handleTablechangeSort (column, prop, order) {/*表格排序*/
      console.log(column, prop, order);
        // let orderByColumn = column.prop;
        // if(column.prop.indexOf('originalPrice')!='-1'){
        //   orderByColumn = 'originalPrice';
        // }else if(column.prop.indexOf('salePrice')!='-1'){
        //   orderByColumn = 'salePrice';
        // }
         this.searchForm.orderByColumn = orderByColumn;
         this.searchForm.isAsc = column.order;
         this.dataInfo();
      },
      handleEdit(row){
        this.$router.push({path:'/shop/applyGoodShop',query:{goodsId:row.goodsId,status:'edit'}});
      },
      handleAdd(){
        this.$router.push({path:'/shop/addShop',query:{goodsType:1}});
      },
      resetQuery() {
        this.auditTime = [];
        this.applyTime = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        // const roleIds = row.roleId || this.ids;
        // if(!this.ids.length && (!row.roleId)){
        //   this.$modal.msgError("请先选中在点击批量删除");
        //   return;
        // }
        this.$modal.confirm('是否确认删除商品名称为"' + row.goodsName + '"的数据？').then(function() {
          return deleteGoods({goodsId:row.goodsId});
        }).then((res) => {
          if(res.code == 200){
            this.dataInfo();
            this.$modal.msgSuccess("删除成功");
          }else{
            this.$modal.msgError("删除失败");
          }
        }).catch(() => {});
      },
      handleAudit(){
        this.dialogTitle = '商品审核'
        this.userFormVisible = true;
      },
      async handleChangeUpDownStatus(row) {/*上下架*/
        try {
          if(row.hotGoodsAuditStatus=='3'){
            this.$confirm(`您确定要${row.goodsState=='2'?'上架':'下架'}?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let data = {
                goodsId : row.goodsId,
                status: row.goodsState=='1'?'2':'1'
              }
              updateGoodsStatus(data).then((result)=>{
              		if (result.code == 200) {
                    this.$message.success(result.msg);
                     row.goodsState=='1'?(row.goodsState='2'):(row.goodsState='1');
                  } else {
                    this.$message.error(result.msg);

                  }
              })

            }).catch(() => {

            });
          }else{
            this.$message.error('商品审核通过才能上下架')
          }
        } catch (err) {
          console.log(err)
        }
      },
      handleSearch() {
        this.searchForm.pageNum = 1;
        this.dataInfo();
      },
      resetFormDialog(formName) {
        this.$refs[formName].resetFields();
      },

      handleNodeClick(data){/*树节点点击事件*/
        this.searchForm.categoryId = '';
        this.searchForm.parentCategoryId = '';
        for(let i=0;i<this.treeListStatus.length;i++){
          if(this.treeListStatus[i].categoryId==data.categoryId){
            this.searchForm.categoryId = data.categoryId;
            this.searchForm.parentCategoryId = data.parentId;
          }
          for(let a=0;a<this.treeListStatus[i].children.length;a++){
            if(this.treeListStatus[i].children[a].categoryId==data.categoryId){
              this.searchForm.categoryId = data.categoryId;
              this.searchForm.parentCategoryId = data.parentId;
            }
          }
        }
       // this.searchForm.goodsCategoryId =  data.categoryId;
        this.handleSearch();
      },
      handleSelectionChange(val) {
        this.multipleSelection = selection.map(item => item.id);
        console.log(this.multipleSelection);
      },

    }
  }
</script>

<style scoped lang="scss">
  .shopOperationBox /deep/ .el-radio-group{
    display: flex;
    flex-wrap: wrap;
  }
  .shopOperationBox /deep/ .el-radio-group .el-radio{
    width: 100%;
    padding:10px 0;
  }
  .tagBox{
    cursor: pointer;
  }
  .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding: 10px;
      height: 52px;
  }
  .index-box{
    padding:0px!important;
    margin-left:0px;
  }
  .tree-box /deep/ .el-tree-node{
     background: #D8E4DD;
  }
  .tree-box> /deep/ .el-tree>.el-tree-node{
    padding:3px;
  }
  .tree-box> /deep/ .el-tree .is-current{
    background:#fff;
  }
  .table-box{
    padding:15px
  }
  .down{
    color: #909399;
    cursor: pointer;
    text-decoration:underline;
  }
  .down:hover{
    color: #a6a9ad;
  }
  .up{
    color:#61997A;
    cursor: pointer;
    text-decoration:underline;
  }
  .up:hover{
    color:#81ad95;
  }
  .treeTitle{
    color: #606266;
    font-size: 15px;
    font-weight: bold;
    margin:20px 20px 0 20px;
  }
</style>
